<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css">
    <link href="https://fonts.googlefonts.cn/css?family=Indie+Flower" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">

</head>

<body>
    <section>
        <div class="swiper">
            <div class="swiper-wrapper">

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>幸福就是能笑，又能笑又能吃好喝好，笑本身就是能治百病的药，你们看到我们，能感到幸福就好了。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/bbh.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>我有一件特别自豪的事，出道到现在的舞台，哪怕一次也没有敷衍了事过。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/kai.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>中国有句话叫'长江后浪推前浪',我希望EXO用自己的努力来改写后半句,'前浪永远站在最高的山顶上！'</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/lay.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>大家都能读懂歌词吗？我之所以选择这首歌，是因为我希望所有人在感到沮丧和疲倦时都能听到它的声音。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/chen.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>如果有一天要在歌手和演员中做出选择的话,我以后也是会无条件以EXO为主不会给成员造成影响。如果不能实现那一点的话,现在就会放弃演戏现在也造成了很多影响真的很内疚。成员们对我来说是很重要的人。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/D.O..jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>人都会有死亡的时候,但不是为了死亡而存在,是为了开始而存在,重新出生我也想不是朴灿烈而是exo的朴灿烈,谢谢大家让我最近这么幸福。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/psy.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>我既是队长也是哥哥，比起独自一个人吃饭，就算是被开玩笑、被恶作剧也要和大家一起吃饭，就算是抢着吃也是大家一起会更好，这应该就是队长吧。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/suho.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>我最大的愿望就是,十年后大家还一起来看EXO的演唱会。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/wsx.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonialBox">
                        <!-- <img src="./images/quote.png" class="quote"> -->
                        <div class="iconfont icon-baojiaquotation"></div>
                        <div class="content">
                            <p>每到新年身体状况就变差为什么呢？是魔咒吗？为了让我的新年更美好而破财免灾吗...... 或者说在替我们爱丽们受苦呢？如果这样，可以受任何苦。</p>
                            <div class="details">
                                <div class="imgBox"><img src="./images/xiumin.jpeg"></div>
                                <h3>Call me exo<br /><span>Creative Designer</span></h3>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div> -->
            <!-- <div class="swiper-button-next"></div> -->

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </section>



    <script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper', {
            
            effect:'coverflow',
            // 鼠标手
            grabCursor:true,

            centeredSlides:true,
            slidesPerView:'auto',
            coverflowEffect:{
                rotate:0,
                stretch:0,
                depth:100,
                modifier:2,
                slideShadows:true,
            },
            loop: true, // 循环模式选项



            // 以下功能需要设置相应的html

            // 如果需要分页器
            // pagination: {
            //     el: '.swiper-pagination',
            // },

            // 如果需要前进后退按钮
            // navigation: {
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            // },

            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        })     
    </script>
</body>

</html>